<template>
  <div id="app">
    <div class="box-header">
      <h1>GRTS在线教育视频网站后台</h1>
      <p>ONLINE EDUCATION</p>
    </div>
    <div class="box">
      <div class="box-content">
        <img class="lt-img" src="../assets/1.png" width="100px" />
        <img class="rt-img" src="../assets/2.png" width="100px" />
      </div>
      <div>
        <div class="step-box">
          <el-steps :active="1" align-center>
            <el-step title="确认账号"></el-step>
            <el-step title="重置密码"></el-step>
            <el-step title="重置成功"></el-step>
          </el-steps>
        </div>
        <div class="step-content">
          <el-input v-model="email" placeholder="请输入绑定的邮箱">
            <template slot="prepend">邮箱</template>
          </el-input>
          <el-button @click="next" class="confirm" type="primary"
            >确认</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 会把login.vue组件导出到main.js，再根据router的规则来决定替换div标签下面的组件
export default {
  data() {
    return {
      email: "",
    };
  },
  methods: {
    next() {
      if (
        this.email.trim() == "" ||
        this.email == null ||
        this.email == undefined
      ) {
        this.$message.error("您没有输入邮箱地址");
        return;
      }
      //get请求速度快一点
      this.$http.get("/user/checked/" + this.email + "/3").then((res) => {
        //1、保存邮箱
        sessionStorage.setItem("updateEmail", this.email);
        //2、跳转到重置密码界面
        this.$router.push("/resetpassword");
      });
    },
  },
};
</script>
<style scoped>
#app {
  background-color: #ffd1b7;
  overflow: hidden;
}
.box-header {
  height: 100px;
  margin-top: 80px;
}
.box-header h1 {
  color: #fff;
  text-align: center;
  font-size: 30px;
  line-height: 90px;
  height: 70px;
}
.box-header p {
  font-size: 12px;
  color: #fff;
  text-align: center;
}
.box {
  position: relative;
  border-bottom: 3px solid #fb966f;
  border-right: 3px solid #fb966f;
  background-color: #fee4d4;
  height: 400px;
  width: 750px;
  margin: 0px auto;
  box-shadow: 10px 10px 6px 2px rgb(251 150 108 / 60%);
  overflow: hidden;
}
.lt-img {
  position: absolute;
  left: 0;
  bottom: 0;
}
.rt-img {
  position: absolute;
  right: 0;
  bottom: 0;
}
.step-box {
  margin-top: 50px;
}
.step-content {
  width: 400px;
  margin: 60px auto;
}
.confirm {
  margin-top: 20px;
  width: 400px;
}
</style>